<template>
  <div class="lyric-box">
    <!-- 这个标签负责做背景 -->
    <div class="bg-1"></div>
    <div class="bg" :style="`background-image:url(${picUrl})`"></div>
    <!-- 这个标签负责做内容 -->
    <div class="content">
      <header>
        <span class="i-left" @click="goBack"></span>
      </header>
      <section>
         <div class="img-box">
            <img :src="picUrl" alt="">
         </div>
      </section>
      <section>
            <div class="info-box">
                <div class="left">
                    <div>歌曲名称</div>
                    <p>歌手信息</p>
                </div>
                <div class="right">
                    收藏
                </div>
            </div>
      </section>
      <section>
         <div class="jdt-box">
                <ul>
                    <li><span></span></li>
                </ul>
                <div class="time">
                    <span>00:00</span>
                    <span>00:00</span>
                </div>
         </div>
      </section>

      <section>
         <div class="btn-box">
            <div class="btn-prev"><i></i></div>
            <div class="btn-pause"><i></i></div>
            <div class="btn-next"><i></i></div>
         </div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
        picUrl: 'https://p1.music.126.net/PzAdCVYmLkKcEY5hE1GfpA==/109951163846016953.jpg'
    }
  },
  methods: {
    // 跳转上一个页面
    goBack() {
      // 利用router实例调用api (编程式导航)
      // this.$router.push({
      //   path: "/home",
      //   query:{}
      // });

      this.$router.back();
    },
  },
};
</script>

<style lang="less">
@import "../static/less/variable.less";
.lyric-box {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 100%;
  height: 100%;
  padding: 0 15px;
  header {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .i-left {
      display: block;
      width: 24px;
      height: 24px;
      background-image: url(../static/images/i-arrow-left.png);
      background-size: cover;
    }
  }

  section {
    padding: 10px 15px;
    .img-box {
        img {
            width: 100%;
            border-radius: 10px;
            box-shadow: 0px 0px 5px #fff;
        }
    }
    .info-box {
        width: 100%;
        display: flex;
        font-size: 16px;
        justify-content: space-between;
        align-items: center;
        .left {
            color: #fff;
            div {
                font-size: 18px;
            }
            p {
                font-size: 14px;
                padding-top: 5px;
            }
        }
    }
    .jdt-box {
        width: 100%;
        padding: 15px 0;
        ul {
            height: 4px;
            width: 100%;
            background-color: rgba(255, 255, 255,.45);
            position: relative;
            li {
               width: 200px; 
               height: 4px;
               background-color: #fff;
            }
            span {
                position: absolute;
                top: -5px;
                left: 200px;
                width: 14px;
                height: 14px;
                background-color: #fff;
                border-radius: 50%;
            }
        }
        .time {
            width: 100%;
            display: flex;
            justify-content: space-between;
            color: #fff;
            font-size: 14px;
            margin-top: 10px;
        }
    }
    .btn-box {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 100px;
      [class^="btn"]{
        width: 30px;
        height: 30px;
        margin: 0 20px;
      }
      .btn-prev {
        background-image: url(../static/images/i-prev.png);
      }
      .btn-pause {
        background-image: url(../static/images/i-pause.png);
        transform: scale(1.5);
      }
      .btn-next {
        background-image: url(../static/images/i-next.png);
      }
    }
  }

  .bg-1 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #fff;
  }

  .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: #fff;
    // 设置背景模糊度
    background-image: url(https://p1.music.126.net/PzAdCVYmLkKcEY5hE1GfpA==/109951163846016953.jpg);
    background-size: 100% 100%;
    filter: blur(50px);
    background-repeat: no-repeat;
  }

  .content {
    width: 100%;
    height: 100%;
    // 因为父元素设置了固定定位  所以子元素设置可滚动
    overflow: scroll;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }

  ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  
}
</style>